徽标|虚实_渐进式Web应用程序介绍

篇首语：本文由编程笔记#小编为大家整理，主要介绍了渐进式 Web 应用程序介绍相关的知识，希望对你有一定的参考价值。

• &＃x1f482; 个人网站:【海拥】【摸鱼游戏】【神级源码资源网】
• &＃x1f91f; 前端学习课程&＃xff1a;&＃x1f449;【28个案例趣学前端】【400个JS面试题】
• &＃x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&＃xff0c;请点击【摸鱼学习交流群】

构建 PWA 背后的核心思想是为所有设备上的普通 Web 应用程序提供最佳用户体验。当我们通过浏览器访问 Web 应用程序时&＃xff0c;整体体验永远赶不上原生应用程序提供的体验。因此&＃xff0c;在可用的开放网络技术的帮助下&＃xff0c;PWA 为使用最新版本浏览器的用户提供了增强的网络体验&＃xff0c;与 android、ios 或 Windows 等依赖于操作系统的应用程序相当。

是什么让它如此酷

• 可以从任何具有现代浏览器的设备访问它。
• 可以像普通网站一样访问、共享和添加书签。
• 它离线工作。
• 它可以像任何其他具有主屏幕快捷方式的本机应用程序一样安装。
• 它可以处理推送通知。
• 它可以访问设备的硬件功能&＃xff0c;如相机、蓝牙等。
• 在开发本机应用程序时&＃xff0c;我们需要为每个平台维护一个代码库&＃xff0c;但开发 PWA 只需要一个代码库。因此&＃xff0c;它降低了可维护性。
• 本机应用程序会不断提醒用户新的更新。PWA 通过简单的页面刷新自动在后台更新内容。
• 通过应用适当的 SEO 技术&＃xff0c;PWA 可以被搜索引擎索引&＃xff0c;因此可以扩大应用程序的可见性。
• 与原生应用相比&＃xff0c;开发 PWA 所需的时间要少得多。因此&＃xff0c;它大大降低了开发成本。

关联

Pinterest 的网站很旧&＃xff0c;网络性能很差。通过分析&＃xff0c;他们意识到提升用户群的难度&＃xff0c;尤其是在未经身份验证的网络用户数量庞大的情况下。因此&＃xff0c;3 个月后&＃xff0c;他们使用 React 重建了现有的 Web 应用程序&＃xff0c;并将其转换为 PWA&＃xff0c;从而使他们的业务实现了巨大增长。他们还成功地减少了 Web 应用程序的捆绑包大小&＃xff0c;这也导致 CPU 性能发生了巨大变化。

结果&＃xff0c;用户在平台上花费的时间增加了 40%&＃xff0c;广告产生的收入增长了 44%。

PWA 的构建块

1.响应式&＃xff1a;由于 PWA 提供跨设备兼容性&＃xff0c;因此它必须在所有设备上响应。
2.Service worker&＃xff1a;这是一个脚本文件&＃xff0c;可以在不影响页面性能的情况下在后台异步运行任务。
3.HTTPS&＃xff1a;由于 PWA 需要服务工作者&＃xff0c;因此它必须从 HTTPS 端点托管。
4.Manifest&＃xff1a;这是一个 json 文件&＃xff0c;我们可以在其中包含与我们的应用程序关联的所有元数据。

让我们再深入一点……

Service worker

Service Worker 负责确保 PWA 可靠且独立于网络状态。

它可以从客户端访问缓存&＃xff0c;并可以存储数据&＃xff0c;例如不需要反复获取的静态资产&＃xff0c;如样式表、html、图像等。这使 PWA 能够在离线模式下仅加载必要的数据. 因此&＃xff0c;它可以减少页面加载延迟&＃xff0c;也可以提高整体性能。

我们还可以让 service worker 监听网络变化期间发生的事件&＃xff0c;并可以动态地服务、修改或拦截应用程序内的网络请求。

简而言之&＃xff0c;PWA 的两个主要功能&＃xff08;例如一次性安装和缓存&＃xff09;是使用 Service Worker 脚本完成的。它还可以用于在用户不使用网站时处理推送通知。

HTTPS

由于以下原因&＃xff0c;PWA 必须使用 HTTPS 协议提供服务&＃xff1a;

1.Service Worker 需要 HTTPS 连接。
2.保护用户的隐私
3.保证内容的真实性

Manifest file

这是一个 json 文件&＃xff0c;其中包含有关 PWA 的所有必要元数据。此文件还使 PWA 可跨设备安装。此元数据包括我们应用程序的标题、主题颜色、显示方式、添加徽标等。创建 manifest.json 文件后&＃xff0c;我们可以将其链接到 html 文件的 head 标记中。

总结

总而言之&＃xff0c;PWA 缩短了 Web 应用程序和原生应用程序之间的差距。毫无疑问&＃xff0c;我们可以说 PWA 是 Web 应用程序的未来。现在世界各地的许多公司都在将他们的 Web 应用程序转换为 PWA&＃xff0c;这确保了它将成为软件行业的开路者。

⭐️ 好书推荐

《元宇宙》

【内容简介】

本书以简单易懂的文字&＃xff0c;搭配轻松诙谐的原创漫画&＃xff0c;让更多人理解什么是元宇宙的 “宏架构”&＃xff0c;了解从原子到比特的逻辑&＃xff0c;明白智能合约、数学及NFT之间的关系&＃xff0c;用图片解析未来世界&＃xff0c;让你轻松走进虚实共生的数字时空&＃xff0c;解锁人类新文明&＃xff0c;设计属于自己的元宇宙。

&＃x1f4da; 京东自营购买链接&＃xff1a;《元宇宙》